<template>
	<div class="list-container">
		<div class="instruct-list-container flex-container">
			<el-row class="search-row">
				<el-col :span="24">
					<el-form :inline="true" :model="searchForm" class="demo-form-inline">
						<el-form-item label="设备编号">
							<el-input v-model="searchForm.device_id" placeholder="" clearable></el-input>
						</el-form-item>
						<el-form-item class="pull-right">
							<el-button type="success" @click="search">查询</el-button>
						</el-form-item>
					</el-form>
				</el-col>
			</el-row>

			<div class="instruct-list-table">
				<el-table :data="instructList" border>

					<el-table-column label="Imei" min-width="180" prop="device_id" >
						<template slot-scope="scope">
							{{ scope.row.device_id }}
						</template>
					</el-table-column>
					<el-table-column label="设备Id" min-width="180" prop="device_id" >
						<template slot-scope="scope">
							{{ scope.row.outer_device_id }}
						</template>
					</el-table-column>
					<el-table-column label="是否离线" min-width="100">
						<template slot-scope="scope">
							{{scope.row.last_active_time | isOff}}
						</template>
					</el-table-column>
					<el-table-column label="最新命令状态" min-width="170">
						<template slot-scope="scope">
							{{scope.row.last_active_time | timeFormat}}
						</template>
					</el-table-column>
					<el-table-column label="更新时间" min-width="170" >
						<template slot-scope="scope">
							{{scope.row.update_time | timeFormat}}
						</template>
					</el-table-column>
				</el-table>
			</div>

			<div class="flex-footer h-80">
				<div class="flex-footer-content">
					<el-row>
						<el-col :span="8" class="pt-6">
						</el-col>
						<el-col :span="16" class="text-center" v-if="total > 0" style="padding-top: 20px">
							<el-pagination
									@current-change="pageChange"
									:current-page="currentPage"
									:page-size="pageSize"
									layout="total, prev, pager, next, jumper"
									:total="total">
							</el-pagination>
						</el-col>
						<!--<el-col :span="8" class="text-center" v-if="total > 0"></el-col>-->
					</el-row>
				</div>
			</div>
		</div>
	</div>
</template>

<script type="text/ecmascript-6">

	import Core from 'core/core'

	export default {
		data() {
			return {
			    space: "20013",
				Core: Core,
				searchForm: {
					device_id: '',

				},
				instructList: [],
				// 分页配置
				currentPage: 1,
				total: 0,
				pageSize: 20,
			}
		},
		mounted: function () {

		},
		watch: {

		},
		methods: {
		    search() {
		        console.log('search')
			}
		}
	}
</script>

<style scoped lang="scss">
	.list-container {
		height: 100%;
		.instruct-list-container {
			height: 100%;
			.search-row {
				margin: 0;
				padding: 15px 30px;
				background: #fff;
				.el-form--inline .el-form-item {
					margin-bottom: 0;
				}
				.el-form-item__label {
					padding-right: 10px;
					font-size: 12px;
				}
				.el-form-item__content {
					.el-input {
						width: 175px;
					}
				}
			}

			.instruct-list-table {
				position: relative;
				box-flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				flex: 1;
				-webkit-flex: 1;
				overflow: auto;
				.all-select-holder {
					line-height: 30px;
					position: absolute;
					left: 10px;
					z-index: 10;
				}
			}
			.flex-footer.h-80 {
				height: 80px;
			}

		}

		a.success {
			display: inline-block;
			color: #fff;
			background-color: #03CC75;
			border-color: #03CC75;
			line-height: 1;
			white-space: nowrap;
			cursor: pointer;
			-webkit-appearance: none;
			text-align: center;
			box-sizing: border-box;
			outline: none;
			-moz-user-select: none;
			-webkit-user-select: none;
			-ms-user-select: none;
			padding: 7px 16px;
			font-size: 12px;
			border-radius: 4px;
			margin: 0 10px;
		}

	}
</style>
